<template>
  <div class="index">
    <img class="top_img" src="../../../assets/img/modules/extra/extra_4.png" alt="">
    <div class="item_video">
      <p>教学老师团队寄语</p>
      <video src="http://v.gzlll.cn/biyedianli.mp4" controls="controls">
        Your browser does not support the video tag.
      </video>
    </div>
    <div class="item_video">
      <p>溢达毕业生感言</p>
      <video src="http://v.gzlll.cn/biyedianli2.mp4" controls="controls">
        Your browser does not support the video tag.
      </video>
    </div>
    <img class="img_btn" src="../../../assets/img/modules/extra/extra_2.png" @click="openUrl" alt="">
    <img class="img_footer" src="../../../assets/img/modules/extra/extra_3.jpg" @click="openUrl" alt="">
    <share-btn ref="shareIndex"></share-btn>
  </div>
</template>
<script>
import ShareBtn from '@/components/share'
export default {
  name: 'index',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    ShareBtn
  },
  data () {
    return {}
  },
  props: {},
  watch: {},
  methods: {
    openUrl () {
      window.location.href = 'http://gkxd.h5new.gdzgjy.com/index.php?center_code=GZSYXYZSXXZX&support=share'
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    this.$refs.shareIndex.openShare(`${window.SITE_CONFIG['shareURL']}//extra-index`, '“锦绣前程”溢达助力计划首届毕业典礼邀您来观礼', '枇杷飘香，仲夏蝉鸣，又到了一批溢达学子学有所成，开启人生新旅程的重要时刻。在这个特别的日子里，我们相聚在这里，共同见证属于溢达2016届毕业生的神圣时刻。', 'http://workeredu.oss-cn-shenzhen.aliyuncs.com/school/407/201907/e4197c52e5a18de3ec43394af94752fa.png')
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .index {
    max-width: 750px;
    margin: 0 auto;
    background: linear-gradient(to bottom, #9B151A, #ef382a);
    text-align: center;
    .top_img{
      width: 748px;
      height: auto;
    }
    .item_video{
      text-align: center;
      margin-bottom: 50px;
      p{
        font-size: 37px;
        color: #ffffff;
        text-align: center;
        margin: 15px;
      }
      video{
        width: 650px;
        height: 380px;
      }
    }
    .img_btn{
      width: 646px;
      height: auto;
    }
    .img_footer{
      width: 750px;
      height: auto;
      display: block;
    }
  }
</style>
